{% extends 'base.html' %}
{% load static %}
{% load story_tags %}

{% block title %}首页 - AI故事创作平台{% endblock %}

{% block extra_css %}
<style>
    /* 英雄区域样式 */
    .hero-section {
        background: linear-gradient(120deg, var(--primary-color), var(--secondary-color));
        color: white;
        padding: 5rem 0;
        border-radius: 20px;
        margin-bottom: 3rem;
        position: relative;
        overflow: hidden;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    }
    
    .hero-section::before {
        content: '';
        position: absolute;
        top: -50px;
        right: -50px;
        background: rgba(255, 255, 255, 0.1);
        width: 300px;
        height: 300px;
        border-radius: 50%;
    }
    
    .hero-section::after {
        content: '';
        position: absolute;
        bottom: -80px;
        left: -80px;
        background: rgba(255, 255, 255, 0.05);
        width: 400px;
        height: 400px;
        border-radius: 50%;
    }
    
    .hero-content {
        position: relative;
        z-index: 1;
    }
    
    .hero-title {
        font-size: 3.5rem;
        font-weight: 700;
        margin-bottom: 1.5rem;
        line-height: 1.2;
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
    }
    
    .hero-lead {
        font-size: 1.25rem;
        margin-bottom: 2rem;
        opacity: 0.9;
        max-width: 80%;
    }
    
    .hero-buttons .btn {
        padding: 12px 30px;
        font-size: 1.1rem;
        margin-right: 15px;
        border-radius: 50px;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
        transition: all 0.3s ease;
    }
    
    .hero-buttons .btn:hover {
        transform: translateY(-3px);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
    }
    
    .hero-image {
        animation: float 6s ease-in-out infinite;
    }
    
    @keyframes float {
        0% { transform: translateY(0px); }
        50% { transform: translateY(-20px); }
        100% { transform: translateY(0px); }
    }
    
    /* 搜索区域样式 */
    .search-section {
        background-color: white;
        padding: 2rem;
        border-radius: 15px;
        margin-bottom: 3rem;
        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
    }
    
    .search-section h4 {
        color: var(--primary-color);
        margin-bottom: 1.5rem;
        font-weight: 600;
    }
    
    /* 数据统计区域 */
    .stats-box {
        background: white;
        border-radius: 15px;
        padding: 1.8rem;
        text-align: center;
        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
        height: 100%;
        transition: all 0.3s ease;
    }
    
    .stats-box:hover {
        transform: translateY(-10px);
        box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
    }
    
    .stats-icon {
        width: 70px;
        height: 70px;
        line-height: 70px;
        font-size: 2rem;
        border-radius: 50%;
        margin: 0 auto 1.2rem;
        background: linear-gradient(120deg, var(--primary-color), var(--secondary-color));
        color: white;
    }
    
    .stats-number {
        font-size: 2.5rem;
        font-weight: 700;
        color: var(--primary-color);
        margin-bottom: 0.5rem;
    }
    
    .stats-label {
        color: #6c757d;
        font-size: 1.1rem;
    }
    
    /* 特色功能区域 */
    .section-title {
        text-align: center;
        margin-bottom: 3rem;
    }
    
    .section-title h2 {
        font-size: 2.5rem;
        font-weight: 700;
        color: var(--dark-color);
        margin-bottom: 1rem;
        position: relative;
        display: inline-block;
    }
    
    .section-title h2:after {
        content: '';
        position: absolute;
        width: 60px;
        height: 3px;
        background: var(--primary-color);
        bottom: -15px;
        left: 50%;
        transform: translateX(-50%);
    }
    
    .section-title p {
        font-size: 1.2rem;
        color: #6c757d;
    }
    
    .feature-card {
        padding: 3rem 2rem;
        text-align: center;
        height: 100%;
        border-radius: 15px;
        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
        transition: all 0.3s ease;
        position: relative;
        overflow: hidden;
        z-index: 1;
    }
    
    .feature-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 5px;
        background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
        z-index: -1;
        transition: all 0.3s ease;
    }
    
    .feature-card:hover::before {
        height: 100%;
        opacity: 0.05;
    }
    
    .feature-card:hover {
        transform: translateY(-10px);
        box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
    }
    
    .feature-icon {
        width: 90px;
        height: 90px;
        line-height: 90px;
        font-size: 2.8rem;
        border-radius: 50%;
        margin: 0 auto 1.5rem;
        background: linear-gradient(120deg, var(--primary-color), var(--secondary-color));
        color: white;
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    }
    
    .feature-card h3 {
        font-size: 1.8rem;
        font-weight: 600;
        margin-bottom: 1rem;
        color: var(--dark-color);
    }
    
    .feature-card p {
        color: #6c757d;
        font-size: 1.1rem;
        line-height: 1.7;
    }
    
    /* 热门故事区域 */
    .story-card {
        height: 100%;
        border-radius: 15px;
        overflow: hidden;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
        transition: all 0.3s ease;
    }
    
    .story-card:hover {
        transform: translateY(-10px);
        box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
    }
    
    .story-card .card-body {
        padding: 1.5rem;
    }
    
    .story-card .card-title {
        font-weight: 600;
        margin-bottom: 0.8rem;
        color: var(--dark-color);
    }
    
    .story-card .card-text {
        color: #6c757d;
    }
    
    .story-card .card-footer {
        padding: 1rem 1.5rem;
        background-color: rgba(0, 0, 0, 0.02);
    }
    
    .story-info {
        font-size: 0.9rem;
        color: #6c757d;
    }
    
    .story-info i {
        color: var(--primary-color);
    }
    
    /* 故事分类区域 */
    .category-section {
        margin-bottom: 4rem;
    }
    
    .category-badge {
        display: inline-block;
        margin: 8px;
        padding: 10px 20px;
        border-radius: 50px;
        background-color: white;
        color: var(--dark-color);
        text-decoration: none;
        transition: all 0.3s ease;
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
        font-weight: 500;
    }
    
    .category-badge:hover {
        background: linear-gradient(120deg, var(--primary-color), var(--secondary-color));
        color: white;
        transform: translateY(-3px);
        box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
    }
    
    /* 注册引导区域 */
    .get-started-section {
        background: linear-gradient(120deg, var(--primary-color), var(--secondary-color));
        color: white;
        padding: 4rem 2rem;
        border-radius: 20px;
        margin: 3rem 0;
        position: relative;
        overflow: hidden;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    }
    
    .get-started-section h2 {
        font-size: 2.5rem;
        font-weight: 700;
        margin-bottom: 1.5rem;
    }
    
    .get-started-section p {
        font-size: 1.2rem;
        margin-bottom: 2rem;
        opacity: 0.9;
    }
    
    .get-started-section .btn {
        padding: 15px 30px;
        font-size: 1.1rem;
        border-radius: 50px;
        background-color: white;
        color: var(--primary-color);
        font-weight: 600;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    }
    
    .get-started-section .btn:hover {
        background-color: rgba(255, 255, 255, 0.9);
        transform: translateY(-3px);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
    }
    
    .get-started-section::before {
        content: '';
        position: absolute;
        top: -50px;
        right: -50px;
        background: rgba(255, 255, 255, 0.1);
        width: 300px;
        height: 300px;
        border-radius: 50%;
    }
    
    .get-started-section::after {
        content: '';
        position: absolute;
        bottom: -80px;
        left: -80px;
        background: rgba(255, 255, 255, 0.05);
        width: 400px;
        height: 400px;
        border-radius: 50%;
    }
</style>
{% endblock %}

{% block content %}
<div class="container main-container">
    <!-- 英雄区域 -->
    <div class="hero-section">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-lg-6 hero-content">
                    <h1 class="hero-title">用 AI 释放你的创作潜力</h1>
                    <p class="hero-lead">利用人工智能技术，探索无限创作可能。让每个人都能成为故事的缔造者，开启你的创意冒险之旅。</p>
                    <div class="hero-buttons">
                        <a href="{% url 'story:create' %}" class="btn btn-light">
                            <i class="bi bi-pencil-square me-2"></i>开始创作
                        </a>
                        <a href="{% url 'story:list' %}" class="btn btn-outline-light">
                            <i class="bi bi-book me-2"></i>浏览故事
                        </a>
                    </div>
                </div>
                <div class="col-lg-6 d-none d-lg-block">
                    <img src="{% static 'admin/img/hero-image.svg' %}" class="img-fluid hero-image" alt="创作插图" onerror="this.onerror=null; this.src='{% static 'admin/img/tx.png' %}';">
                </div>
            </div>
        </div>
    </div>

    <!-- 搜索区域 -->
    <div class="container">
        <div class="search-section">
            <h4><i class="bi bi-search me-2"></i>搜索故事</h4>
            <form action="{% url 'story:list' %}" method="get" class="row g-3">
                <div class="col-md-6">
                    <input type="text" name="q" class="form-control" placeholder="输入关键词搜索..." aria-label="搜索关键词">
                </div>
                <div class="col-md-4">
                    <select name="category" class="form-select">
                        <option value="">全部分类</option>
                        {% for category in categories %}
                        <option value="{{ category.id }}">{{ category.name }}</option>
                        {% endfor %}
                    </select>
                </div>
                <div class="col-md-2">
                    <button type="submit" class="btn btn-primary w-100">
                        <i class="bi bi-search me-2"></i>搜索
                    </button>
                </div>
            </form>
        </div>
    </div>

    <!-- 平台统计 -->
    <div class="container">
        <div class="row mb-5">
            <div class="col-md-3 mb-4">
                <div class="stats-box">
                    <div class="stats-icon">
                        <i class="bi bi-people"></i>
                    </div>
                    <div class="stats-number">{{ user_count|default:"500+" }}</div>
                    <div class="stats-label">创作者</div>
                </div>
            </div>
            <div class="col-md-3 mb-4">
                <div class="stats-box">
                    <div class="stats-icon">
                        <i class="bi bi-book"></i>
                    </div>
                    <div class="stats-number">{{ story_count|default:"1000+" }}</div>
                    <div class="stats-label">原创故事</div>
                </div>
            </div>
            <div class="col-md-3 mb-4">
                <div class="stats-box">
                    <div class="stats-icon">
                        <i class="bi bi-eye"></i>
                    </div>
                    <div class="stats-number">{{ view_count|default:"5000+" }}</div>
                    <div class="stats-label">阅读量</div>
                </div>
            </div>
            <div class="col-md-3 mb-4">
                <div class="stats-box">
                    <div class="stats-icon">
                        <i class="bi bi-robot"></i>
                    </div>
                    <div class="stats-number">{{ ai_story_count|default:"300+" }}</div>
                    <div class="stats-label">AI生成故事</div>
                </div>
            </div>
        </div>

        <!-- 特色功能 -->
        <div class="section-title">
            <h2>特色功能</h2>
            <p>让创作变得更加简单、有趣</p>
        </div>
        
        <div class="row mb-5">
            <div class="col-md-4 mb-4">
                <div class="feature-card">
                    <div class="feature-icon">
                        <i class="bi bi-robot"></i>
                    </div>
                    <h3>AI智能创作</h3>
                    <p>使用先进的人工智能技术，帮助您快速生成故事创意和内容。可自定义故事主题、风格和长度，满足个性化创作需求。</p>
                </div>
            </div>
            <div class="col-md-4 mb-4">
                <div class="feature-card">
                    <div class="feature-icon">
                        <i class="bi bi-people-fill"></i>
                    </div>
                    <h3>社区互动</h3>
                    <p>与其他创作者交流，分享经验，获得反馈。可以点赞、评论、收藏喜欢的故事，与志同道合的朋友一起成长。</p>
                </div>
            </div>
            <div class="col-md-4 mb-4">
                <div class="feature-card">
                    <div class="feature-icon">
                        <i class="bi bi-gear-fill"></i>
                    </div>
                    <h3>个性化体验</h3>
                    <p>根据您的喜好和创作风格，提供个性化的创作建议和指导。系统会逐渐了解您的偏好，推荐更符合您口味的内容。</p>
                </div>
            </div>
        </div>

        <!-- 热门故事 -->
        <div class="section-title">
            <h2>热门故事</h2>
            <p>发现精彩故事，获取创作灵感</p>
        </div>
        
        <div class="row mb-5">
            {% get_trending_stories 7 4 as trending_stories %}
            {% for story in trending_stories %}
            <div class="col-md-6 col-lg-3 mb-4">
                <div class="card story-card h-100">
                    <div class="card-body">
                        <h5 class="card-title">{{ story.title|truncatechars:25 }}</h5>
                        <p class="story-info mb-3">
                            <i class="bi bi-person me-1"></i> {{ story.author.username }} 
                            <i class="bi bi-calendar ms-3 me-1"></i> {{ story.created_at|date:"Y-m-d" }}
                        </p>
                        <p class="card-text">{{ story.content|striptags|truncatechars:100 }}</p>
                    </div>
                    <div class="card-footer bg-transparent">
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <i class="bi bi-eye me-1"></i> {{ story.views }}
                                <i class="bi bi-heart ms-2 me-1"></i> {{ story.likes }}
                            </div>
                            <a href="{% url 'story:detail' story.pk %}" class="btn btn-sm btn-primary">
                                <i class="bi bi-book me-1"></i>阅读全文
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            {% empty %}
            <div class="col-12">
                <div class="alert alert-info">
                    <i class="bi bi-info-circle me-2"></i>暂无热门故事，开始创作成为第一个吧！
                </div>
            </div>
            {% endfor %}
        </div>

        <!-- 加入我们 -->
        <div class="get-started-section">
            <div class="container">
                <div class="row align-items-center">
                    <div class="col-lg-7">
                        <h2>加入我们，开启创作之旅</h2>
                        <p>注册成为AI故事创作平台的一员，使用AI技术助力您的创作，让每个创意都能成为精彩故事。</p>
                        {% if not user.is_authenticated %}
                        <a href="{% url 'user:register' %}" class="btn btn-lg">
                            <i class="bi bi-person-plus me-2"></i>立即注册
                        </a>
                        {% else %}
                        <a href="{% url 'story:create' %}" class="btn btn-lg">
                            <i class="bi bi-pencil-square me-2"></i>开始创作
                        </a>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>

        <!-- 故事分类 -->
        <div class="category-section">
            <div class="section-title">
                <h2>故事分类</h2>
                <p>探索不同类型的精彩故事</p>
            </div>
            
            <div class="category-container text-center">
                {% for category in categories %}
                <a href="{% url 'story:list' %}?category={{ category.id }}" class="category-badge">
                    <i class="bi bi-tag me-2"></i>{{ category.name }}
                </a>
                {% empty %}
                <a href="#" class="category-badge"><i class="bi bi-tag me-2"></i>奇幻</a>
                <a href="#" class="category-badge"><i class="bi bi-tag me-2"></i>科幻</a>
                <a href="#" class="category-badge"><i class="bi bi-tag me-2"></i>爱情</a>
                <a href="#" class="category-badge"><i class="bi bi-tag me-2"></i>悬疑</a>
                <a href="#" class="category-badge"><i class="bi bi-tag me-2"></i>冒险</a>
                <a href="#" class="category-badge"><i class="bi bi-tag me-2"></i>历史</a>
                <a href="#" class="category-badge"><i class="bi bi-tag me-2"></i>童话</a>
                <a href="#" class="category-badge"><i class="bi bi-tag me-2"></i>恐怖</a>
                {% endfor %}
            </div>
        </div>
    </div>
</div>
{% endblock %}
 